<?php
?>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link href="css/paper.css" rel="stylesheet" type="text/css" />
<link href="css/index.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" href="css/public.css"/>
<link rel="stylesheet" type="text/css" href="css/style-blue.css"/>
<link href="css/css3-github-buttons-master/gh-buttons.css?v=0830" rel="stylesheet" type="text/css"/>
<script src="js/jquery-1.8.3.min.js" type="text/javascript"></script>
<title>注册  -宝贝星启航</title>
</head>
<body>
	<div style = "margin:0 auto;width:75%;"><span style='font-size:20px;font-weight:bold;line-height:50px;color:#0099DD;'>注册：</span>
		<a style='float:right;padding-top:30px;padding-right:5px;color:#0099DD;' href="index.php">返回</a>
	</div>
	
	<div id="container" class="paper" style="margin-bottom:30px;background: rgba(50, 50, 50, 0.99);">
		<div id="left" style="width:69%;height:100%;float:left;">
			<div id="wel" style="font-size:24px;padding:20px;color:#0099DD;" >欢迎加入宝贝星启航</div>
			<div id="name" style="padding-top:40px;padding-left: 120px;color:#fff;">
				<div>用户名</div>
				<input type="text" placeholder="请填写用户名/手机号/常用邮箱" class="text" name="username" id="username" value="" style="margin-top:5px;padding-left:40px;width:200px;height:20px;color:#000;"/>
			</div>
			<div id="pas" style="padding-top:20px;padding-left: 120px;color:#fff;">
				<div>密码</div>
				<input type="password" placeholder="请填入4~20位字母或数字" class="text" name="password" id="password" value="" style="margin-top:5px;padding-left:40px;width:200px;height:20px;color:#000;"/>
			</div>
			<div id="repas" style="padding-top:20px;padding-left: 120px;color:#fff;">
				<div>确认密码</div>
				<input type="password" placeholder="请再次填入密码" class="text" name="repassword" id="repassword" value="" style="margin-top:5px;padding-left:40px;width:200px;height:20px;color:#000;"/>
				
			</div>
			<span id='pass-tip' style='color:red;font-size:12px;padding-top:5px;padding-left: 120px;display:none'></span>
			<div id="tk" style="padding-top:5px;padding-left: 120px;font-size:12px;color:#aaa;">
				<input type="checkbox" checked="true" class="checkbox" name="tkbx" value=""/>同意宝贝星启航 <a href="agreement.php" target='_blank'>《使用条款》</a>
			</div>
			<div id="reg" style="padding-top:20px;padding-left: 120px;">
				<a href="#" class='overview-confirm button px60 py8 blue' onclick='submit()'>注册</a>
			</div>
		</div>
		<div id="right"style="width:30%;height:100%;float:right;color:green;border-left:1px solid #414141">
			<div style="margin-top:100px;border:5px solid #414141;width:90%;margin-left:10px">
				<div style="width:90%;padding:5px;">已经注册过？<a href="index.php">登录宝贝星启航</a></div>
				<!--<div style="width:90%;padding-left:5px;padding-top:3px;"><a href='qq_login.php'><img src="img/qq_connect.png"></img></a></div>-->
			</div>
		</div>
	</div>
	<script type="text/javascript">
	function submit(){
		$("#pass-tip").css("display","none");
		name = $("#username").val();
		password = $("#password").val();
		repassword = $("#repassword").val();
		if(name == "" || name.length < 6){
			$("#pass-tip").css("display","block");
			$("#pass-tip").html("用户名长度小于6");
			return;
		}
		if(password == "" || repassword =="" || password != repassword || password.length < 4 || password.length > 20){
			$("#pass-tip").css("display","block");
			$("#pass-tip").html("密码输入有误");
		}else{
			$.ajax({
			type: "POST",
			url: "lib/handler.php",
			dataType: "text",
			data: {
				type:"register",
				username: name,
				password: password
				},
			success:function(text){
					if(text != "exist" && text != "failed"){
						window.location.href="index.php?id="+text;
					}else if(text == "exist"){
						$("#pass-tip").css("display","block");
						$("#pass-tip").html("该用户名已被注册");
					}
				},
			error:function(){
				alert("register failed");
				}
			});
		}
	}
	</script>
	<?php include_once("footer.php"); ?>
</body>
</html>